<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog" :z-index="1000">
        <el-form :model="addPbTestForm" ref="addPbTestRef" :rules="addPbTestrules">
            <el-form-item label="考试标题" :label-width="formLabelWidth" prop="title">
                <el-input v-model="addPbTestForm.title" autocomplete="off" ref="name" placeholder="请填写考试标题"></el-input>
            </el-form-item>
            <el-form-item label="考试内容" :label-width="formLabelWidth" prop="content">
                <el-input v-model="addPbTestForm.content" autocomplete="off" ref="name"
                    placeholder="请填写考试内容"></el-input>
            </el-form-item>
            <!-- <el-form-item label="考试时间" prop="daterange" :label-width="formLabelWidth">
                <el-date-picker v-model="addPbTestForm.daterange" type="datetimerange" value-format="HH:mm:ss"
                    range-separator="到" unlink-panels="true" start-placeholder="开始时间" end-placeholder="结束时间">
                </el-date-picker>
            </el-form-item> -->
            <!-- <el-form-item label="开始时间" :label-width="formLabelWidth" prop="startTime" >
                <el-input v-model="addPbTestForm.startTime" autocomplete="off" ref="name"
                    placeholder="请填写开始时间"></el-input>
            </el-form-item>
            <el-form-item label="结束时间" :label-width="formLabelWidth" prop="endTime" >
                <el-input v-model="addPbTestForm.endTime" autocomplete="off" ref="name"
                    placeholder="请填写结束时间"></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="是否生效" :label-width="formLabelWidth" prop="isEffect" v-if="addPbTestForm.id">
                <el-input v-model="addPbTestForm.isEffect" autocomplete="off" ref="name"
                    placeholder="请填写是否生效"></el-input>
            </el-form-item> -->
            <el-form-item label="权重" :label-width="formLabelWidth" prop="sortNum">
                <el-input type="number" v-model="addPbTestForm.sortNum" autocomplete="off" ref="name"
                    placeholder="请填写权重"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="save()">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {
    name: "AddPbTest",
    components: { ElForm, ElMessage },
    data() {
        return {
            dialogFormVisible: ref(false),
            formLabelWidth: "120px",
            title: "",
            personnelType: "",
            addPbTestForm: {
                title: "",
                content: "",
                startTime: "",
                endTime: "",
                createNumber: "",
                createName: "",
                isEffect: "",
                sortNum: "",
                daterange: ''
            },
            // 校验规则
            addPbTestrules: {
                title: vxRule(true, null, "blur"),
            },
        };
    },
    methods: {
        closeDialog() {
            this.clear();
        },
        cancel() {
            this.dialogFormVisible = false;
            this.clear();
        },
        getPbTestById(id) {
            httpService("/javaApi/pbTest/queryById", { id: id }, "get").then(
                (data) => {
                    this.addPbTestForm = data;
                }
            );
        },
        clear() {
            this.dialogFormVisible = false;
            //清空form
            this.addPbTestForm.id = "";
            this.addPbTestForm.title = "";
            this.addPbTestForm.content = "";
            this.addPbTestForm.startTime = "";
            this.addPbTestForm.endTime = "";
            this.addPbTestForm.createNumber = "";
            this.addPbTestForm.createName = "";
            this.addPbTestForm.isEffect = "";
            this.addPbTestForm.sortNum = "";
            this.addPbTestForm.daterange = "";
        },
        save() {
            this.$refs.addPbTestRef.validate((valid) => {
                if (valid) {
                    let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
                    params.append("title", this.addPbTestForm.title);
                    params.append("content", this.addPbTestForm.content);
                    params.append("daterange", this.addPbTestForm.daterange);
                    params.append("sortNum", this.addPbTestForm.sortNum);
                    if (this.addPbTestForm.id) {
                        params.append("id", this.addPbTestForm.id);
                        httpService("/javaApi/pbTest/edit", params, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success("修改成功");
                                    this.clear();
                                    //刷新父组件的数据
                                    this.$parent.getPbTestList();
                                } else {
                                    ElMessage.error("修改失败");
                                }
                            }
                        );
                    } else {
                        httpService("/javaApi/pbTest/add", params, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success("添加成功");
                                    this.clear();
                                    //刷新父组件的数据
                                    this.$parent.getPbTestList();
                                } else {
                                    ElMessage.error("添加失败");
                                }
                            }
                        );
                    }
                } else {
                    return false;
                }
            });
        },
    },
};
</script>
<style>

</style>